<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合同模板</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            display: flex;
            margin: 0;
            padding: 0;
        }

        #left-panel {
            width: 30%;
            padding: 20px;
            background: #f4f4f4;
            border-right: 1px solid #ddd;
            overflow-y: auto;
        }

        #right-panel {
            width: 70%;
            padding: 20px;
            position: relative;
        }

        #contract-content {
            width: 100%;
            height: 100%;
            max-height: calc(100vh - 40px);
            padding: 20px;
            border: 1px solid #ddd;
            overflow-y: scroll;
            background-color: #fff;
        }

        .draggable {
            padding: 10px;
            background-color: #cce5ff;
            margin-bottom: 10px;
            border: 1px solid #007bff;
            cursor: grab;
        }

        .draggable img {
            max-width: 100px;
            display: block;
        }

        .dragImage {
            width: 80px;
            height: 80px;
            display: block;
        }

        .sign-placeholder {
            display: inline-block;
            width: 100px;
            height: 50px;
            border: 1px dashed #999;
            margin-top: 10px;
        }

        .sign-placeholder-border-none {
            display: inline-block;
            width: 100px;
            height: 50px;
            border: none;
            margin-top: 10px;
        }

        #export-button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
            margin-top: 20px;
            display: block;
            text-align: center;
        }
        #container {
            display: flex;
            height: 100%;
            width: 100%;
        }
        .drop-over {
            background-color: rgba(128,128,128,0.5);
        }
        .red-dot {
            width: 15px;
            height: 15px;
            background-color: red;
            border-radius: 50%;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div id="container">


    <div id="contract-content">
        <h2>劳动合同</h2>
        <p>本合同为甲乙双方就劳动关系达成的协议。</p>
        <p>甲方：<span id="part_jia" data-drop="part_jia">[请拖入]</span></p>
        <p>乙方：<span id="part_yi" data-drop="part_yi">[请拖入]</span></p>
        <div>签章：<div class="sign-placeholder" id="sign_placeholder" data-drop="sign_placeholder"></div></div>
        <h3>合同条款</h3>
        <p>1. 劳动合同期限为X年，自XX年XX月XX日起至XX年XX月XX日止。</p>
        <p>2. 甲方同意聘用乙方担任XX岗位，乙方同意接受聘用。</p>
        <p>3. 乙方应遵守甲方的规章制度，按时完成工作任务。</p>
        <p>4. 甲方支付乙方工资及福利待遇，并依法缴纳社会保险。</p>
        <p>5. 本合同未尽事宜，按法律法规和甲方规定执行。</p>
    </div>
</div>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>

<script>
    //获取所有可拖拽的元素进行监听 - 有draggable=true的元素
    const containers = document.getElementById("container");

    //开始拖拽的原始节点
    let source;

    //拖拽开始的事件：
    //每次拖拽时监听
    containers.ondragstart = function (e) {


        //改变鼠标的cursor样式
        e.dataTransfer.effectAllowed = 'copy';
        //记录下拖拽的是哪个元素
        source = e.target;

        if (e.target.tagName === 'IMG') {
            source = e.target.cloneNode(true);
        }
        //e.target 可得到当前拖拽的元素
        console.log('dragStart',e.target)
    }

    //监听拖拽到哪个元素上
    //只要元素被拖拽到，就一直监听打印
    containers.ondragover = function (e) {
        //阻止浏览器的默认行为-为ondrop 浏览器默认某些元素是不让被拖拽到自己身上的
        e.preventDefault();

        //e.target 获得拖拽的元素被拖拽到哪个元素上
        //console.log('dragOver',e.target)
    }

    //监听拖拽到哪个元素上
    //与over的区别是只触发一次，移动到哪个元素时触发一次
    containers.ondragenter = function (e) {

        let dropNode = getDropNode(e.target);
        //e.dataTransfer.effectAllowed 在start监听中设置后就一直存在
        if (dropNode && dropNode.dataset.drop === source.dataset.effect) {
            //如果被拖拽到的元素的自定义元素 和 拖拽的元素的属性一致，改变被拖拽到元素背景色
            dropNode.classList.add("drop-over");
        } else {
            e.dataTransfer.effectAllowed = 'uninitialized';
        }
        //e.target 获得拖拽的元素被拖拽到哪个元素上
        console.log('dragenter',e.target)
    }

    //监听元素拖拽到哪个元素上放手
    //！！！！！！需注意的是：有些元素(eg:table/tr/td是不允许被拖拽到自己元素上的，是浏览器的默认行为，需要在dragOver事件阻止浏览器默认行为)
    containers.ondrop = function (e) {

        const dropNode = getDropNode(e.target);
        //判断当前移入元素的自定义元素是否是可被接受的类型
        if (dropNode && dropNode.dataset.drop === source.dataset.effect) {
            //防止多次重复拖入
            dropNode.innerHTML = '';
            if (source.dataset.content === 'img') {
                //拖动的元素是签章图片
                console.log('图片',dropNode)
                source.classList.add("dragImage");
                dropNode.appendChild(source)

                var imageContainer = document.getElementById("sign_placeholder");
                imageContainer.classList.remove('drop-over');
                imageContainer.classList.replace("sign-placeholder", "sign-placeholder-border-none");
            } else {
                dropNode.innerHTML = source.dataset.val;
            }


            //右上角添加小红点（叉号）可清空内容
            if (!dropNode.querySelector('.red-dot')) {
                const redDot = document.createElement('div');
                redDot.classList.add('red-dot');

                // 添加点击事件，点击清空内容
                redDot.addEventListener('click', (event) => {
                    dropNode.innerHTML = '[请拖入]';  // 恢复默认文本
                    redDot.remove();  // 移除红点
                    event.stopPropagation();  // 防止事件冒泡
                });

                dropNode.style.position = 'relative';  // 使子元素绝对定位相对于父元素
                redDot.style.position = 'absolute';  // 确保红点在右上角
                redDot.style.top = '-5px';
                redDot.style.right = '-20px';

                dropNode.appendChild(redDot);  // 将红点添加到目标区域
            }


        }

        //e.preventDefault();
        console.log('dropSource',source)
        console.log('drop',e.target)
    }

    //获取拖拽到的元素
    //如果当前元素有data-drop的话，就返回，没有的话就找它的父元素
    //解决的问题是：元素被二次拖拽进入左侧的元素列表，只有父元素改变样式
    function getDropNode(node) {
        while (node) {
            if (node.dataset && node.dataset.drop) {
                return node;
            }
            node = node.parentNode;
        }
    }


    // 导出为PDF
    /*async function exportPDF() {
        let dots = document.querySelectorAll('.red-dot');
        if (dots) {
            dots.forEach(item=>{
                item.style.display = 'none';
            })
        }

        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        const content = document.getElementById("contract-content");

        let yOffset = 0;
        const pageHeight = 297; // A4 page height in mm

        while (yOffset < content.scrollHeight) {
            await html2canvas(content, { y: yOffset, windowWidth: content.scrollWidth }).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                pdf.addImage(imgData, 'PNG', 10, 10, 190, 0);
                yOffset += canvas.height;

                if (yOffset < content.scrollHeight) {
                    pdf.addPage();
                }
            });
        }

        pdf.save("合同.pdf");
    }*/

    async function exportPDF() {
        // 隐藏标记元素
        let dots = document.querySelectorAll('.red-dot');
        if (dots) {
            dots.forEach(item => {
                item.style.display = 'none';
            });
        }

        // 配置html2pdf选项
        const content = document.getElementById("contract-content");
        const options = {
            margin: 0,
            filename: '合同.pdf',
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: {
                scale: 2, // 提高分辨率
                useCORS: true // 支持跨域图片
            },
            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
        };

        // 生成PDF并下载
        await html2pdf().set(options).from(content).save();

        // 恢复标记元素显示
        if (dots) {
            dots.forEach(item => {
                item.style.display = 'block';
            });
        }
    }
</script>

</body>
</html>
